<template>
  <el-upload
    class="avatar-uploader"
    :action="upload_file_url"
    :headers="headers"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img
      v-if="imageUrl"
      :src="isPDfUrlName.indexOf('.pdf') == -1 ? imageUrl : imagePdfUrl"
      class="avatar"
    />
    <div v-else class="avatarBot">
      <i class="el-icon-plus avatar-uploader-icon"></i>
      <span class="tips">{{ tips }}</span>
    </div>
  </el-upload>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    imgType: {
      type: Number,
      default: 0,
    },
    tips: {
      type: String,
      default: "",
    },
    imageUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // imageUrl: "",
      imagePdfUrl: require("../../assets/images/pdf.png"),
      upload_file_url:
        process.env.VUE_APP_BASE_URL + "/api/v1/uploadFile/pictureUpload",
      headers: {
        Authorization: "6a77998089b8467d83d2094a8011b02d",
        Token: "Bearer " + getToken(),
      },
      listType: "text",
      isPDfUrlName: "",
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      let imageUrl = URL.createObjectURL(file.raw);
      this.$emit("imageUrl", imageUrl, this.imgType);
      if (res.code == 200) {
        this.$message.success("上传成功");
        this.isPDfUrlName = file.name || "";
        this.$emit("childEvent", res.result, this.imgType, {
          name: file.name || "",
          urls: res.message || "",
          imgType: this.imgType,
        });
      }
    },
    beforeAvatarUpload(file) {
      //   const isJPG = file.type === "image/jpeg";
      //   const isLt2M = file.size / 1024 / 1024 < 2;

      //   if (!isJPG) {
      //     this.$message.error("上传头像图片只能是 JPG 格式!");
      //   }
      //   if (!isLt2M) {
      //     this.$message.error("上传头像图片大小不能超过 2MB!");
      //   }
      //   return isJPG && isLt2M;
      let fileName = file.name;
      let fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
      let fileTypJuge =
        fileType === "png" ||
        fileType === "jpg" ||
        fileType === "gif" ||
        fileType === "pdf" ||
        fileType === "PNG" ||
        fileType === "JPG" ||
        fileType === "GIF" ||
        fileType === "PDF";
      let fileSize = Number(file.size / 1024 / 1024);
      if (!fileTypJuge) {
        this.$message.error("上传文件仅支持jpg、png、gif、pdf格式");
      }
      if (fileSize > 5) {
        this.$message({
          message: "文件大小不能超过5M！",
          type: "warning",
        });
        return false;
      }
    },
  },
  // 上传文件成功
  //   handleUploadSuccess(response, file, fileList) {
  //     let fileBox = {};
  //     if (response.code == 200) {
  //       this.$message.success("上传成功");
  //       this.$emit("childEvent", response.result);
  //     }
  //   },
};
</script>
<style lang="scss" scoped>
.avatar-uploader {
  height: 150px;
  width: 150px;
  position: relative;
}
::v-deep .el-upload {
  border: 1px solid #eeeeee;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 150px;
  background-color: #ffff;
  font-size: 14px;
  color: #ccc;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px solid #eeeeee;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: transparent;
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #ccc;
}
.tips {
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
}
.avatarBot {
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.avatarL {
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}
</style>
